<template>
  <div class="sign box clmcenter">
    <div class="sign_container clmstart">
      <div class="sign_title">填写注册信息</div>
      <div class="sign_content">
        <form class="signfrm">
          <div class="sitem">
            <p class="stxt">姓名</p>
            <input type="text" class="sinput" v-model="uname" />
          </div>
          <div class="sitem">
            <p class="stxt">手机号</p>
            <input type="tel" maxlength="11" class="sinput" v-model="umobile" />
          </div>
          <div class="sitem sitem_code">
            <p class="stxt">验证码</p>
            <div class="codebox">
              <input type="tel" maxlength="4" class="sinput" v-model="ucode" />
              <button type="button" class="getcode" @click="getCode">{{ codetips }}</button>
            </div>
          </div>
          <div class="sitem sitem_city">
            <p class="stxt">城市</p>
            <input type="text" class="sinput" v-model="ucity" @click="cityflag = true" />
            <van-popup v-model:show="cityflag" round position="bottom">
              <van-picker :columns="citys" @cancel="cityflag = false" @confirm="onConfirm" />
            </van-popup>
          </div>
          <div class="sitem sitem_secret">
            <van-radio
              name="1"
              checked-color="#ee0a24"
              icon-size="12px"
              class="radio"
              v-model="checkflag"
            >
              我已知晓本次活动规则及联合利华隐私条例。<br />
              确认接受联合利华信息。
            </van-radio>
          </div>
        </form>
      </div>
      <button type="button" class="btn_submit btnani" @click="submitUserInfo">提交</button>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { useUserStore } from '@/stores/user'
import { getVerifyCodeApi, registerApi } from '@/apis/user'
import { ref } from 'vue'
import { showToast } from 'vant'

let uname = ref('')
let umobile = ref('')
let ucode = ref('')
let codetips = ref('获取验证码')
let ucity = ref('')
let cityflag = ref(false)
let citys = ref([
  { text: '北京', value: 0 },
  { text: '上海', value: 1 },
  { text: '广州', value: 2 },
  { text: '深圳', value: 3 }
])
let checkflag = ref(false)
// 城市选择
const onConfirm = ({ selectedOptions }) => {
  ucity.value = selectedOptions[0].text
  cityflag.value = false
}

// 获取验证码
const getCode = async () => {
  let myreg = /^1[3-9][0-9]{9}$/
  // 手机号验证
  if (umobile.value === '') {
    showToast('请输入手机号')
    return
  }
  // 手机号格式验证
  if (!myreg.test(umobile.value)) {
    showToast('请输入正确的手机号')
    return
  }
  const res = await getVerifyCodeApi({ mobile: umobile.value })
  if (res.data.code === 200) {
    let count = 60
    codetips.value = `${count}秒后重新获取`
    let timer = setInterval(() => {
      count--
      if (count <= 0) {
        clearInterval(timer)
        codetips.value = '获取验证码'
      } else {
        codetips.value = `${count}秒后重新获取`
      }
    }, 1000)
    showToast('验证码已发送')
  } else {
    showToast(res.data.msg)
  }
}

// 提交
const submitUserInfo = async () => {
  if (uname.value === '' || umobile.value === '' || ucode.value === '' || ucity.value === '') {
    showToast('请填写完整信息')
    return
  }
  if (!checkflag.value) {
    showToast('请阅读并同意隐私条款')
    return
  }
  let params = {
    username: uname.value,
    mobile: umobile.value,
    code: ucode.value,
    city: ucity.value,
    is_agree: checkflag.value ? 1 : 0
  }
  const res = await registerApi(params)
  console.log(res)
  if (res.data.code === 200) {
    showToast('提交成功')
  } else {
    showToast(res.data.msg)
  }
}
</script>

<style lang="scss" scoped>
.sign {
  background-image: linear-gradient(to top, #aff86b, #e2fc73, #ffe0a7);
  font-size: 24px;
  .sign_container {
    width: 600px;
    background: #000000;
    border-radius: 10px;
    color: #ffffff;
    padding: 30px;
    box-sizing: border-box;
    .sign_title {
      font-size: 40px;
      font-weight: 700;
      padding-top: 50px;
    }
    .sign_content {
      margin-top: 40px;
      .signfrm {
        .sitem {
          width: 500px;
          margin-bottom: 30px;
          .stxt {
            padding-left: 10px;
          }
          .sinput {
            margin-top: 10px;
            width: 100%;
            height: 60px;
            border-radius: 10px;
            border: 1px solid #ffffff;
            padding: 0 10px;
            box-sizing: border-box;
            text-indent: 10px;
            color: #000000;
          }
        }
        .sitem_code {
          .codebox {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .sinput {
              width: 60%;
              margin-top: 0;
            }
            button {
              margin-left: 20px;
              width: calc(100% - 60% - 20px);
              height: 60px;
              background: #ffffff;
              border-radius: 10px;
              border: 1px solid #ffffff;
              color: #000000;
            }
          }
        }
        .sitem_city {
          input {
            background: #ffffff url('@/assets/img/icon.png') no-repeat right center;
            background-size: 5% auto !important;
            background-position: right 15px top 15px;
          }
        }
        .sitem_secret {
          font-size: 20px;
          color: #ffffff;
        }
      }
    }
    .btn_submit {
      margin: 50px 0;
      background: #ffffff;
      border: none;
      border-radius: 10px;
      color: #000000;
      font-size: 30px;
      padding: 15px 60px;
    }
  }
}
</style>
<style>
.van-radio__label {
  color: #ffffff !important;
  line-height: 1.3 !important;
}
</style>
